<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户详情</title>
    <link rel="stylesheet" href="../css/black.css" />
    <style>
        .gird {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr 2fr;
            margin-bottom: 20px;
        }

        .control-1 {
            width: 200px;
            padding: 5px 7px;
        }

        .flex1 {
            display: flex;
            justify-content: space-between
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="toolbar">
            <a href="./editor.html">
                <button class="btn btn-orange">编辑</button>
            </a>
            <button class="btn btn-red">删除</button>
            <button class="btn btn-green">改为已成交</button>
            <button class="btn btn-gray">改为未成交</button>
            <button class="btn btn-pink">变更负责人</button>
            <button class="btn btn-black">锁定</button>
            <button class="btn btn-azure">解锁</button>
            <button class="btn btn-blue">放入公海</button>
        </div>
        <div>
            <h2>客户基本信息</h2>
            <div class="gird">
                <span>客户名称</span>
                <span>XXX</span>
                <span>负责人</span>
                <span>XXX</span>
                <span>客户来源</span>
                <span>XXX</span>
                <span>锁定状态</span>
                <span>未锁定</span>
                <span>网址</span>
                <span>XXX</span>
                <span>成交状态</span>
                <span>未成交</span>
                <span>地区</span>
                <span>XXX省XXX市XXX区</span>
                <span>联系电话</span>
                <span>XXX</span>
                <span>联系地址</span>
                <span>XXX</span>
                <span>下次联系时间</span>
                <span>XXX</span>
                <span>备注</span>
                <span>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
            </div>

        </div>
        <div>
            <h2>联系人</h2>
            <table class="table">
				<thead>
					<tr>
						<th>姓名</th>
						<th>职务</th>
						<th>电话</th>
						<th>性别</th>
						<th>电子邮箱</th>
                        <th>是否为决策人</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>XXX</td>
						<td>XXX</td>
						<td>XXXXXXXXX</td>
						<td>XXX</td>
						<td>XXXXXXXXXXXXXX</td>
                        <td>是</td>
					</tr>
					<tr>
						<td>XXX</td>
						<td>XXX</td>
						<td>XXXXXXXXX</td>
						<td>XXX</td>
						<td>XXXXXXXXXXXXXX</td>
                        <td>是</td>
					</tr>
                    <tr>
						<td>XXX</td>
						<td>XXX</td>
						<td>XXXXXXXXX</td>
						<td>XXX</td>
						<td>XXXXXXXXXXXXXX</td>
                        <td>否</td>
					</tr>
				</tbody>
			</table>
        </div>
        <div>
            <h2>写跟进</h2>
            <div class="flex1">
                <div class="item">
                    <label for="" class="item-left">跟进时间</label>
                    <div class="item-right">
                        <input type="date" class="control" />
                    </div>
                </div>
                <div class="item">
                    <label for="" class="item-left">联系人</label>
                    <div class="item-right">
                        <select class="control-1">
                            <option value=""></option>
                        </select>
                    </div>
                </div>
                <div class="item">
                    <label for="" class="item-left">跟进方式</label>
                    <div class="item-right">
                        <select class="control-1">
                            <option value=""></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="item">
                <label for="" class="item-left">跟进内容</label></label>
                <div class="item-right">
                    <textarea class="control"></textarea>
                </div>
            </div>
            <div class="item">
                <label for="" class="item-left">下次联系</label>
                <div class="item-right">
                    <input type="date" class="control" />
                </div>
            </div>
            <div class="item">
                <label for="" class="item-left"></label>
                <div class="item-right">
                    <button class="btn btn-blue">提交</button>
                </div>
            </div>
        </div>
        <div>
            <h2>跟进记录</h2>
            <table class="table">
				<thead>
					<tr>
						<th>跟进时间</th>
						<th>联系人</th>
						<th>跟进方式</th>
						<th>跟进记录</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>XXX</td>
						<td>XXX</td>
						<td>XXX</td>
						<td>XXXXXXXXXXXXXXXXXXXXXXXX</td>
					</tr>
					<tr>
						<td>XXX</td>
						<td>XXX</td>
						<td>XXX</td>
						<td>XXXXXXXXXXXXXXXXXXXXXXXX</td>
					</tr>
                    <tr>
						<td>XXX</td>
						<td>XXX</td>
						<td>XXX</td>
						<td>XXXXXXXXXXXXXXXXXXXXXXXX</td>
					</tr>
				</tbody>
			</table>
        </div>
    </div>
</body>

</html>